<template>
  <div>
    <headBox id="headBox">
      <van-search
        slot="searchBox"
        v-model="searchText"
        shape="round"
        background="#1B7373"
        placeholder="国家级铜雕"
      />
    </headBox>
    <div class="content">
      <leftNav></leftNav>
      <div class="rightContent">
        <div class="banner">
          <img src="../../assets/img/cateBanner.png" alt="" />
        </div>
        <ul class="cateList">
          <li v-for="(item, idx) in shopData" :key="idx">
            <img :src="item.img" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
        <p class="fashion">时尚</p>
        <ul class="fashionList">
          <li v-for="(item, idx) in fashionData" :key="idx">
            <img :src="item.img" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
    <bottomNav></bottomNav>
  </div>
</template>
<script>
import headBox from "../../component/headBox.vue";
import leftNav from "../../component/leftNav.vue";
import bottomNav from "../../component/bottomNav.vue";
export default {
  name: "classification",
  components: {
    headBox,
    leftNav,
    bottomNav,
  },
  data() {
    return {
      searchText: "",
      shopData: [
        {
          img: require("../../assets/img/cateImg.png"),
          name: "耳饰",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "戒指",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "手链",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "项链",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "吊坠",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "发饰",
        },
      ],
      fashionData: [
        {
          img: require("../../assets/img/cateImg.png"),
          name: "耳饰",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "戒指",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "手链",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "项链",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "吊坠",
        },
        {
          img: require("../../assets/img/cateImg.png"),
          name: "发饰",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-search {
  width: 3.43rem;
  height: 0.32rem;
  margin: 0 auto;
}
#headBox {
  padding-top: 0.06rem;
  height: 0.38rem;
}
.content {
  margin-top: 0.18rem;
  display: flex;
  .rightContent {
    margin-left: 0.23rem;
    .banner {
      width: 2.48rem;
      height: 1.24rem;
      img {
        width: 100%;
      }
    }
    .cateList {
      display: flex;
      margin-top: 0.28rem;
      width: 2.48rem;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        width: 0.7rem;
        margin-right: 0.12rem;
        margin-bottom: 0.23rem;
        img {
          width: 0.7rem;
          height: 0.7rem;
        }
        p {
          font-size: 0.12rem;
          margin: 0 auto;
          margin-top: 0.04rem;
        }
      }
    }
    .fashion {
      font-size: 0.14rem;
      color: #333333;
      margin-top: 0.25rem;
    }
    .fashionList {
      display: flex;
      margin-top: 0.15rem;
      width: 2.48rem;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        width: 0.7rem;
        margin-right: 0.12rem;
        margin-bottom: 0.23rem;
        img {
          width: 0.7rem;
          height: 0.7rem;
        }
        p {
          font-size: 0.12rem;
          margin: 0 auto;
          margin-top: 0.04rem;
        }
      }
    }
  }
}
</style>